import React, { Component } from 'react'

export default class App extends Component {
  state = {
    name: '张三',
    age: 10
  }

  changeName(e){
    console.log(e.target.value);
    this.setState({
      name: e.target.value
    })
  }

  changeAge(e){
    this.setState({
      age: e.target.value
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.name} -- {this.state.age}</h1>
        {/* 该写法，输入框不能输入任何内容 */}
        {/* 如果要想改变内容，我们可以使用 onChange  */}
        {/* 
            如果给输入框设置了 value 属性，就一定要给其添加一个 onChange 事件，否则
            该输入框就为只读的，无法输入任何内容
            如果你是单独想设置一个默认的值，那么你可以通过 defaultValue 进行设置默认值
         */}
        {/* <input type="text" value={this.state.name} /> */}

         {/* 单纯的设置默认值，当输入框内容发送改变的时候，不会影响到 this.state.name */}
        {/* <input type="text" defaultValue={this.state.name} /> */}

         {/* 该写法叫做受控表单(受控组件)，有 value 代表为受控，没有 value 就为非受控 */}
        <input type="text" value={this.state.name} onChange={(e)=>{this.changeName(e)}} />

        <input type="text" value={this.state.age} onChange={(e)=>{this.changeAge(e)}} />

      </div>
    )
  }
}
